<div>
    <section class="overview-section">
        <div class="title-wrapper">
            <div class="title-block arrow-block" *ngIf="withAdmiral">
                <clr-icon class="rotate-90 arrow-back" shape="arrow" size="36" (click)="onBack()"></clr-icon>
            </div>
            <div class="title-block">
                <h2 class="custom-h2">{{repositoryId}}:{{tagDetails.name}}</h2>
            </div>
        </div>
        <div class="summary-block row">
            <div class="image-summary col-md-4 col-sm-6">
                <div class="flex-block">
                    <section class="image-detail-label">
                        <section class="detail-row">
                            <label class="detail-label">{{'TAG.AUTHOR' | translate }}</label>
                            <div class="image-details" [title]="author | translate">{{author | translate}}</div>
                        </section>
                        <section class="detail-row">
                            <label class="detail-label">{{'TAG.ARCHITECTURE' | translate }}</label>
                            <div class="image-details" [title]="tagDetails.architecture">{{tagDetails.architecture}}</div>
                        </section>
                        <section class="detail-row">
                            <label class="detail-label">{{'TAG.OS' | translate }}</label>
                            <div class="image-details" [title]="tagDetails.os">{{tagDetails.os}}</div>
                        </section>
                        <section class="detail-row">
                            <label class="detail-label">{{'TAG.OS_VERSION' | translate }}</label>
                            <div class="image-details" [title]="tagDetails['os.version']">{{tagDetails['os.version']}}</div>
                        </section>
                        <section class="detail-row">
                            <label class="detail-label">{{'TAG.DOCKER_VERSION' | translate }}</label>
                            <div class="image-details" [title]="tagDetails.docker_version">{{tagDetails.docker_version}}</div>
                        </section>
                        <section class="detail-row">
                            <label class="detail-label">{{'TAG.SCAN_COMPLETION_TIME' | translate }}</label>
                            <div class="image-details" [title]="scanCompletedDatetime | date">{{scanCompletedDatetime | date}}</div>
                        </section>
                    </section>
                </div>
            </div>
            <div *ngIf="withClair" class="col-md-4 col-sm-6">
                <div class="vulnerability">
                    <hbr-vulnerability-bar [repoName]="repositoryId" [tagId]="tagDetails.name" [summary]="tagDetails.scan_overview"></hbr-vulnerability-bar>
                </div>
                <div class="flex-block vulnerabilities-info">
                    <div class="second-column">
                        <div class="row-flex">
                            <div class="icon-position">
                                <clr-icon shape="error" size="24" class="is-error"></clr-icon>
                            </div>
                            <span class="detail-count">{{highCount}}</span> {{packageText(highCount) | translate}} {{haveText(highCount) | translate}} {{'VULNERABILITY.SEVERITY.HIGH' | translate }} {{suffixForHigh | translate }}
                        </div>
                        <div class="second-row row-flex">
                            <div class="icon-position">
                                <clr-icon shape="exclamation-triangle" size="24" class="tip-icon-medium"></clr-icon>
                            </div>
                            <span class="detail-count">{{mediumCount}}</span> {{packageText(mediumCount) | translate}} {{haveText(mediumCount) | translate}} {{'VULNERABILITY.SEVERITY.MEDIUM' | translate }} {{suffixForMedium | translate }}
                        </div>
                        <div class="second-row row-flex">
                            <div class="icon-position">
                                <clr-icon shape="play" size="22" class="tip-icon-low rotate-90"></clr-icon>
                            </div>
                            <span class="detail-count">{{lowCount}}</span> {{packageText(lowCount) | translate}} {{haveText(lowCount) | translate}} {{'VULNERABILITY.SEVERITY.LOW' | translate }} {{suffixForLow | translate }}
                        </div>
                        <div class="second-row row-flex">
                            <div class="icon-position">
                                <clr-icon shape="help" size="20"></clr-icon>
                            </div>
                            <span class="detail-count">{{unknownCount}}</span> {{packageText(unknownCount) | translate}} {{haveText(unknownCount) | translate}} {{'VULNERABILITY.SEVERITY.UNKNOWN' | translate }} {{suffixForUnknown | translate }}
                        </div>
                    </div>
                </div>
            </div>
            <div *ngIf="!withAdmiral && tagDetails?.labels?.length">
                <div class="third-column detail-title">{{'TAG.LABELS' | translate }}</div>
                <div class="fourth-column">
                    <div *ngFor="let label of tagDetails.labels" class="detail-tag">
                        <hbr-label-piece [label]="label"></hbr-label-piece>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <clr-tabs>
        <clr-tab *ngIf="hasVulnerabilitiesListPermission && withClair">
            <button clrTabLink [clrTabLinkInOverflow]="false" class="btn btn-link nav-link" id="tag-vulnerability" [class.active]='isCurrentTabLink("tag-vulnerability")' type="button" (click)='tabLinkClick("tag-vulnerability")'>{{'REPOSITORY.VULNERABILITY' | translate}}</button>
            <clr-tab-content id="content1" *clrIfActive="true">
                <hbr-vulnerabilities-grid [repositoryId]="repositoryId" [projectId]="projectId" [tagId]="tagId"></hbr-vulnerabilities-grid>
            </clr-tab-content>
        </clr-tab>
        <clr-tab>
            <button [clrTabLinkInOverflow]="false" *ngIf="hasBuildHistoryPermission" id="tag-history" clrTabLink class="btn btn-link nav-link" [class.active]='isCurrentTabLink("tag-history")' type="button" (click)='tabLinkClick("tag-history")'>{{ 'REPOSITORY.BUILD_HISTORY' | translate }}</button>
            <clr-tab-content *clrIfActive>
                <hbr-tag-history [repositoryId]="repositoryId" [tagId]="tagId">{{ 'REPOSITORY.BUILD_HISTORY' | translate }}</hbr-tag-history>
            </clr-tab-content>
        </clr-tab>
    </clr-tabs>
</div>